<template>
<div class="loginBg">
    <el-form  ref="form" :model="loginForm" class="login" >
        <h3>欢迎使用在线批阅系统</h3>
        <el-form-item>
            <el-input aria-placeholder="用户名" v-model="username">
                <template slot="prepend">账号：</template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-input  aria-placeholder="密码" v-model="password" >
                <template slot="prepend">密码：</template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="checked" >记住我</el-checkbox><p/>
            <el-button type="primary" style="width:100%" @click="toHome">登录</el-button>
        </el-form-item>

    </el-form>
</div>
</template>

<script>
import Vue from 'vue'
import global from "@/global";

export default {
  name: "Login",
  data(){
    return {
      username:'',
      password:'',
    }
  },
  methods:{
    toHome(){
      this.$http(
          {
            url:'/user/login',
            method:'get',
            params:{
              'userName':this.username,
              'password':this.password
            },
          }
      ).then((rep)=>{
          console.log(rep)
          global.user = rep.data.data;
          global.type = rep.data.data;
          console.log(global.user);
      })
      Vue.prototype.$globalkey = {
        user: '',
        type: '',
      }
      global.user = 1;
      global.type = 1;
      this.$router.push('/home/Info')
    }
  }
}
</script>

<style scoped>
  .login{
      border-radius: 15px;
      background-clip: padding-box;
      margin:180px auto;
      width:350px;
      padding: 15px 35px 15px 35px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;

  }
.loginBg{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: rgba(38, 50, 56, .6) url(../images/bg.jpg) no-repeat;
  background-size: 100% 100%;
}
</style>
